<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
</head>
<body>
<!-- 宿主文件 -->
<div id="app">
</div>

<script src="../js/vue.js"></script>
<script>
    // 1、创建Vue的实例
    const app = new Vue({
        el: "#app",
        data() {
            return {
                title: '开课吧，购物车!',
                course: '',
                courses: ['web全栈', 'web高级']
            }
        },
        methods: {
            addCourse() {
                // 1、添加course到数组
                this.courses.push(this.course)
                // 2、清空course
                this.course = ''
            }
        },
        render() {
            with (this) {
                return _c('div', {
                    attrs: {
                        "id": "app"
                    }
                }, [_c('h2', {
                    attrs: {
                        "title": title
                    }
                }, [_v("\n        " + _s(title) + "\n    ")]), _v(" "), _c('p', [_c('input', {
                    directives: [{
                        name: "model",
                        rawName: "v-model",
                        value: (course),
                        expression: "course"
                    }],
                    attrs: {
                        "type": "text"
                    },
                    domProps: {
                        "value": (course)
                    },
                    on: {
                        "keydown": function($event) {
                            if (!$event.type.indexOf('key') && _k($event.keyCode, "enter", 13, $event.key, "Enter"))
                                return null;
                            return addCourse.apply(null, arguments)
                        },
                        "input": function($event) {
                            if ($event.target.composing)
                                return;
                            course = $event.target.value
                        }
                    }
                }), _v(" "), _c('button', {
                    on: {
                        "click": addCourse
                    }
                }, [_v("新增！")])]), _v(" "), _l((courses), function(c) {
                    return _c('div', {
                        key: c
                    }, [_c('div', [_v("\n            " + _s(c) + "\n        ")])])
                })], 2)
            }
        }
    })

    console.log(app.$options.render)
</script>
</body>
</html>
